<template>
	<view class="productSpecifications">
		<view class="head_type">
			<input class="type_input" v-model="type" placeholder="自定义编辑分类.可多个分类" placeholder-style="color: #A3A2A0;"
				type="text" value="" />
			<button class="type_btn" type="default" @click="addType">确定</button>
		</view>

		<view class="type_list">
			<view class="type_item" v-for="(item,index) in parm" :key="index">
				<view class="item_head">
					<view class="head_icon" />
					<text>{{item.group_value}}</text>
					<image @click="delType(index)" class="head_close" src="/static/pages/image/close.png" mode=""></image>
				</view>
				<view class="item_main">
					<view class="type_input_content" v-for="(t,i) in item.key_value" :key="i">
						<input class="type_input" type="text" :value="t" @input="handleVal($event,index,i)" />
						<image @click="delVal(index,i)" class="type_input_close" src="/static/pages/image/close.png" mode=""></image>
					</view>

					<view class="add_type" @click="addVal(index)">
						<image class="add_type_img" src="/static/pages/image/add_type.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="btn_content">
			<button class="btn" type="default" @click="submit">确定</button>
		</view>

	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				type: '', //分类
				parm: [],
				goods_id: null
			}
		},
		onLoad(option) {
			this.goods_id = option.goods_id
			let parm = uni.getStorageSync('parm')
			if (parm) this.parm = JSON.parse(parm)
			console.log(this.parm)
		},
		methods: {
			delType(index){
				this.parm.splice(index,1)
			},
			delVal(index,i){
				this.parm[index].key_value.splice(i,1)
			},	
			submit() {
				if (this.parm.length < 1) {
					uni.showToast({
						title: '请添加分类',
						icon: "none"
					})
					return
				}
				let parm = JSON.stringify(this.parm)
				uni.setStorageSync('parm', parm)
				let data = {
					m: "monai_market",
					r: "goods.index.setParam",
					uid: uni.getStorageSync('uid'),
					parm,
				}
				if (this.goods_id) data.goods_id = this.goods_id
				app.globalData.util.request({
					url: "entry/wxapp/Api",
					data,
					success: res => {
						uni.navigateBack()
						uni.hideLoading();
					},
					fail: res => {
						uni.hideLoading();
					}
				});
			},
			handleVal(event, index, i) {
				this.$set(this.parm[index].key_value, i, event.detail.value)
			},
			addType() {
				if (!this.type) {
					uni.showToast({
						title: "请输入分类",
						icon: 'none'
					})
					return
				}
				this.parm.push({
					group_value: this.type,
					key_value: []
				})
				this.parm = this.onReduce(this.parm)
			},
			addVal(index) {
				let i = this.parm[index].key_value.length - 1
				if (!this.parm[index].key_value[i] && this.parm[index].key_value.length > 0) {
					uni.showToast({
						title: "不能为空",
						icon: 'none'
					})
					return
				}
				this.parm[index].key_value.push('')
			},
			// 去重
			onReduce(params) {
				let obj = {};
				let parm = params.reduce((cur, next) => {
					obj[next.group_value] ? "" : obj[next.group_value] = true && cur.push(next);
					return cur;
				}, [])
				return parm
			}
		}
	}
</script>

<style scoped lang="scss">
	.productSpecifications {
		padding: 0 32upx;
		box-sizing: border-box;

		.head_type {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #EBEBEB;
			padding: 32upx 0;
			box-sizing: border-box;

			.type_input {
				flex: 1;
				font-size: 28upx;
				font-weight: bold;
				color: #A3A2A0;
				padding-right: 20upx;
				box-sizing: border-box;
			}

			.type_btn {
				width: 122upx;
				height: 58upx;
				line-height: 58upx;
				background: linear-gradient(141deg, #0CD8C2, #0BC2AE);
				border-radius: 29upx;
				font-size: 30upx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.type_list {
			.type_item {

				.item_head {
					padding: 35upx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					font-size: 28upx;
					font-weight: 500;
					color: #333333;
					position: relative;

					.head_icon {
						width: 11upx;
						height: 11upx;
						background: #0BC2AE;
						border-radius: 50%;
						margin-right: 14upx;
					}

					.head_close {
						position: absolute;
						right: 0;
						width: 24upx;
						height: 24upx;
					}
				}

				.item_main {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-row-gap: 34upx;
					grid-column-gap: 31upx;

					.type_input_content {
						position: relative;
					}

					.type_input_close {
						position: absolute;
						top: -5px;
						right: -5px;
						width: 36rpx;
						height: 36rpx;
					}

					.type_input {
						padding: 0 38upx;
						box-sizing: border-box;
						height: 66upx;
						background: #DDFEF8;
						border-radius: 33upx;
						line-height: 66upx;
						font-size: 26upx;
						font-weight: 500;
						color: #0BC2AE;
					}

					.add_type {
						width: 127upx;
						height: 66upx;
						background: #F7F7F7;
						border-radius: 33upx;
						text-align: center;
						line-height: 66upx;
					}

					.add_type_img {
						width: 29upx;
						height: 29upx;
					}
				}
			}
		}

		.btn_content {
			position: fixed;
			bottom: 54upx;
			padding: 0 30upx;
			box-sizing: border-box;
			left: 0;
			right: 0;
		}

		.btn {
			width: 100%;
			height: 114upx;
			line-height: 114upx;
			background: linear-gradient(-87deg, #0CD8C2, #0BC2AE);
			border-radius: 57upx;
			font-size: 36upx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
